<template>
	<view class="page">
		<status-bar title='我的奖品' :goHome='fromShare'></status-bar>
		<view class="classNav flexac bgwhite" :style="{top: totalHeight+'px'}">
            <u-tabs :list="tabList" :lineColor="color" lineWidth="30" @click="tabClick" itemStyle="height: 50px;"
                :inactiveStyle="{color:'#777',fontSize:'30rpx',transform:'scale(1)'}"
                :activeStyle="{color:'#444',fontSize:'30rpx',fontWeight:'bold',transform:'scale(1.2)'}"></u-tabs>
        </view>
		<view class="padding40-30 m-top100" v-if="prizeList.length">
			<view class="item bgwhite bor_radius_6 d-flex j-sb a-center m-bot20" v-for="(item,index) in prizeList"
				:key="index">
				<view class="d-flex flex-1">
					<image :src="$imgUrls(item.img)" mode="aspectFill" class="img f-shrink-0"></image>
					<view class="d-flex f-column j-sb padding10-20">
						<view class="color_06C bold">{{ item.gameName }}</view>
						<view class="size32 color_22 bold500 ellipsis">{{ item.title }}</view>
						<view class="color_99">中奖时间：{{ item.addTimeDate }}</view>
					</view>
				</view>
				<view class="btn bor_radius_6 size26 text-center" @click="handleView(index)">立即查看</view>
			</view>
		</view>

		<empty v-if="noData" cat='3' msg='暂时还没有奖品哦~~'></empty>

		<!-- 奖品详情 -->
		<u-overlay :show="show" @click="show = false">
			<view class="flexac height">
				<view class="details bor_radius_30s bgwhite p-re p-left40 p-right40 p-top70 p-bot70" @tap.stop
					:class="{'p-bot140': (popupData.type == 2 && popupData.flag == 3) || (popupData.type != 1 && popupData.type != 2)}">
					<view class="title size42 white bold text-center p-ab">奖品详情</view>
					<view class="close p-ab" @click="show = false">
						<u-icon name="close-circle" size="30" color="#fff"></u-icon>
					</view>
					<view class="cont">
						<!-- 共同显示 -->
						<view class="d-flex a-center">
							<image :src="$imgUrls(popupData.img)" mode="aspectFill" class="img f-shrink-0"></image>
							<view class="p-left20 p-right20">
								<view class="size32 color_22 bold500 ellipsis m-bot10">{{ popupData.title }}</view>
								<view class="size28 color_99 bold400 ellipsis_2">{{ popupData.info }}</view>
							</view>
						</view>
						<view v-if="popupData.details">
							<view class="size28 color_22 bold500 m-top30 m-bot20">奖品说明:</view>
							<u-parse :content="popupData.details" :domain="imgUrl"></u-parse>
							<view class="toggle size28 text-center m-top10" @click="showPop = true">展开<text class="iconfont icon-xiangxia1"></text></view>
							<!-- <mp-html :content="popupData.details" lazy-load scroll-table selectable use-anchor /> -->
						</view>
						<!-- 线下自提 -->
						<view class="text-center p-top60" v-if="popupData.type == 1 && popupData.flag != 6">
							<!-- 用来核销 -->
							<image :src="$imgUrls(popupData.QRCode)" mode="scaleToFill" class="code"
								show-menu-by-longpress></image>
						</view>
						<!-- 快递邮寄 -->
						<view v-if="popupData.type == 2">
							<view class="size28 color_22 bold500 m-top40 m-bot20">{{ popupData.receiveText }}</view>
							<view @click="toAddressList">
								<!-- 未选择 -->
								<view class="unreceipt_addr choose_wxaddr" v-if='!popupData.uaddr'>
									<text class="unreceipt_addr_text">添加收货地址</text>
								</view>
								<!-- 已选择 -->
								<view class="d-flex j-sb a-center" v-else>
									<view>
										<view>
											<text class="h6 color_77 bold400 m-right20">{{ popupData.uname }}</text>
											<text class="h6 color_77 bold400">{{ popupData.utel }}</text>
										</view>
										<view class="size28 color_77 bold500">{{ popupData.uaddr }}</view>
									</view>
									<text class="iconfont icon-xiangyouxiayiye" v-if="popupData.flag == 3"></text>
								</view>
							</view>
							<!-- 物流信息 -->
							<view v-if="popupData.flag == 5 && popupData.courierInfo">
								<view class="m-top40" v-if="popupData.courierInfo.courierFirm">
									<text class="size28 color_22 bold500 m-right20">快递公司</text>
									<text class="size28 color_77 bold500">{{ popupData.courierInfo.courierFirm }}</text>
								</view>
								<view class="m-top20" v-if="popupData.courierInfo.oddNumbers">
									<text class="size28 color_22 bold500 m-right20">快递单号</text>
									<text class="size28 color_77 bold500">{{ popupData.courierInfo.oddNumbers }}</text>
									<text class="size28 color_22 bold500 m-left10 p-left10"
										@click="$pop.setClip(popupData.courierInfo.oddNumbers)"
										style="border-left: 1rpx solid #777;">复制</text>
								</view>
							</view>
						</view>
						<view class="btn size30 bold500 text-center p-ab"
							v-if="popupData.type == 2 && popupData.flag == 3" @click="handleSubmit">确认收货地址</view>
						<!-- 积分 -->
						<view class="btn size30 bold500 text-center p-ab" v-if="popupData.type == 3"
							@click="toUrl('/userPage/sign/integralRecord')">查看积分</view>
						<!-- 优惠券 -->
						<view class="btn size30 bold500 text-center p-ab" v-if="popupData.type == 4"
							@click="toUrl('/userPage/user/discount_coupon')">查看优惠券</view>
						<!-- 余额 -->
						<view class="btn size30 bold500 text-center p-ab" v-if="popupData.type == 5"
							@click="toUrl('/moneyPage/capital/myMoney')">查看余额</view>
					</view>
				</view>
			</view>
		</u-overlay>

		<u-popup :show="showPop" :round="10" mode="bottom" closeable @close="showPop = false">
            <view class="padding30">
                <view class="size36 text-center m-bot30">{{ popupData.title }}</view>
                <view class="botPop">
                    <u-parse :content="popupData.details" :domain="imgUrl"></u-parse>
                </view>
            </view>
        </u-popup>

		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	var that
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,
				fromShare: 0,
				prizeList: [],
				noData: false,
				show: false, // 奖品详情
				popupData: {},
				cid: "",
				showModal: false,
				tabList: [
					{ name: '全部', state: 0 },
					{ name: '待领取', state: 1 },
					{ name: '已领取', state: 2 }
				],
				state: 0,
				showPop: false
			}
		},
		computed: {
			...mapState(['bid', 'vid', 'totalHeight', 'color'])
		},
		onLoad(e) {
			console.log(e, 'e');
			that = this
			if (e.fromShare) that.fromShare = e.fromShare
			if (e.cid) that.cid = e.cid
			that.getPrizeList()
		},
		onShow() {
			if (that.popupData.type != 2) return
			that.getOldAddress()
		},
		methods: {
			tabClick(e) {
				that.state = e.state
				that.getPrizeList()
			},
			getPrizeList() {
				that.$showLoading('')
				that.$http.post({
					url: '/SRA_LuckDraw/myPrizeList',
					data: {
						VeriCode: that.bid,
						cid: 'all',
						state: that.state
					}
				}).then(res => {
					that.$hideLoading()
					if (res.code != 100) return that.$Toast(res.notice)
					that.prizeList = res.data || []
					that.noData = that.prizeList.length ? false : true
				})
			},
			handleView(index) {
				that.show = true
				that.popupData = that.prizeList[index]
				if (that.popupData.uaddr || that.popupData.type != 2) return
				that.getOldAddress()
			},
			getOldAddress() {
				that.$http.get({
					url: '/SRA_simMallApi/getOldAddress',
					data: {
						type: 3
					}
				}).then(res => {
					if (res.code == 100 && res.data) {
						that.popupData.uname = res.data.Aname
						that.popupData.utel = res.data.Amobile
						that.popupData.uaddr = res.data.Aregion + res.data.Aaddress
					}
				})
			},
			handleSubmit() {
				if (!that.vid) return that.showModal = true
				let { logId, prizeId, uname, utel, uaddr } = that.popupData
				if (!uaddr) return that.$Toast('请选择收货地址')
				that.$http.post({
					url: '/SRA_LuckDraw/saveMyInfo',
					data: {
						VeriCode: that.bid,
						cid: 'all',
						logId,
						prizeId,
						uName: uname,
						uTel: utel,
						uAddr: uaddr,
						// remarks: ''
					}
				}).then(res => {
					if (res.code != 100) return that.$Toast(res.notice)
					that.show = false
					that.$Toast('提交成功')
					that.getPrizeList()
				})
			},
			toAddressList() {
				if (that.popupData.flag == 3) {
					that.toUrl(`/orderPage/Addresslist/Addresslist`)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classNav {
		position: fixed;
		left: 0;
		z-index: 10;
		width: 100%;
	}
	.item {
		width: 100%;
		height: 180rpx;
		padding: 20rpx;
		box-shadow: 4rpx 4rpx 13rpx 1rpx rgba(0, 0, 0, 0.13);

		.color_06C {
            color: #0066CC;
        }

		.btn {
			width: 120rpx;
			line-height: 44rpx;
			border: 2rpx solid #FF4525;
			color: #FF4525;
			;
		}
	}

	.details {
		width: 680rpx;
		box-shadow: 0rpx 16rpx 2rpx 0rpx #F55F3E;
		border: 15rpx solid #FEE1B2;

		.cont {
			min-height: 460rpx;
			max-height: calc(80vh - 216rpx);
			overflow-x: hidden;
			overflow-y: auto;

			::v-deep ._root {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.toggle {
				color: #F95433;
			}
		}

		.title {
			width: 396rpx;
			line-height: 66rpx;
			background: #F95433;
			border-radius: 43rpx;
			border: 10rpx solid #FFECA0;
			box-shadow: 1rpx 4rpx 18rpx 0rpx rgba(201, 17, 0, 0.4);
			left: 50%;
			margin-left: -198rpx;
			top: -43rpx;
		}

		.close {
			left: 50%;
			margin-left: -30rpx;
			bottom: -120rpx;
		}

		.btn {
			width: 272rpx;
			line-height: 66rpx;
			background: linear-gradient(0deg, #FFEAA0, #FDC71F);
			box-shadow: 0rpx 10rpx 0rpx 0rpx #FD6703;
			border-radius: 33rpx;
			color: #DA6627;
			left: 50%;
			margin-left: -136rpx;
			bottom: 40rpx;
		}

		.code {
			width: 160rpx;
			height: 160rpx;
		}
	}

	.img {
		width: 140rpx;
		height: 140rpx;
	}

	.botPop {
        min-height: 300rpx;
        max-height: 70vh;
        overflow-y: auto;
    }
</style>